<template>
    <div class="photolist">
        <myheader title="图片列表" :back="true" :more="false"></myheader>
<!--        图片导航标签-->
        <ly-tab
                v-model="selectedId"
                :items="items"
                :options="options"
                @change="handleChange"
                >
        </ly-tab>
<!--        图片列表子组件-->
        <imglist :list="imglist"></imglist>
    </div>
</template>

<script>
    import myheader from '../../components/header'
    import imglist from './imglist'
    import {Toast} from 'mint-ui'
    export default {
        name: "photolist",
        data () {
            return {
                selectedId: 0,
                items: [],
                options: {
                    activeColor: '#26a2ff'
                    // 可在这里指定labelKey为你数据里文字对应的字段
                },
                imglist:[],
                id:3
            }
        },
        components:{
            myheader,
            imglist
        },
        methods:{
            getPhotoLabel(){ //获取图片标签
               this.$http.get('api/getimgcategory').then(response=>{
                   response.body.message.unshift({title:'全部图片',id:0})
                   response.body.message.forEach(item=>{//item 代表数组中的每一项
                           item.label = item.title
                   })
                   // console.log(response)
                this.items = response.body.message
               },error=>{
                    Toast('获取图片导航标签失败！')
               })
            },
            handleChange(item){//ly-tab组件自带的change事件，这个事件绑定一个方法，提供给我们两个参数，item\index
                //item:指的就是我们图片标签链接的每一项，index就是每一项的索引
                console.log(item.id);
                this.getImgList(item.id)
            },
            getImgList(id){ //根据图片分类id，获取相关的图片数据 ,给一个形参id，在调用的时候给他具体的参数（实参）
               this.$http.get('api/getimages/'+id).then(res=>{//获取成功以后加一个判断，判断一下获取到的图片数量，如果数量为零就给一个提示信息
                   if (!res.body.message.length){
                       Toast('暂时没有相关的图片！')
                   }
                  this.imglist = res.body.message
               },err=>{
                   Toast('获取图片分类数据失败！')
               })
            }
        },
        created(){
            this.getPhotoLabel();
            this.getImgList(0)//获取全部图片 ，根据全部图片的id:0
        }
    }
</script>

<style scoped lang="scss">
    ::v-deep a{
    color: #333333;
}
</style>
